<template>
	<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO -->
	<radio-group :name="name"><slot></slot></radio-group>
	<!-- #endif -->

	<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
	<i-form-field :name="name" :value="radioGroupVal"><slot></slot></i-form-field>
	<!-- #endif -->
</template>

<script setup>
import { ref, watch, onBeforeUnmount } from 'vue'

const emit = defineEmits(['change', 'update:modelValue'])

const props = defineProps({
	name: {
		type: String,
		default: ''
	},
	modelValue: {
		type: String,
		default: ''
	}
})

let radioGroupVal = ref('')
let children = []

watch(
	() => props.modelValue,
	nVal => {
		modelChange(nVal)
	}
)

onBeforeMount(() => {
	children = []
})

const radioChange = e => {
	emit('change', e)
	emit('update:modelValue', e.detail.value)
}

const modelChange = value => {
	children.forEach(item => {
		if (item.value === value) {
			item.checkedVal = true
		} else {
			item.checkedVal = false
		}
	})
}

const changeValue = (value, target) => {
	radioGroupVal.value = value

	children.forEach(item => {
		if (item !== target) {
			item.checkedVal = false
		}
	})

	let e = {
		detail: {
			value: value
		}
	}
	radioChange(e)
}
</script>

<style lang="scss" scoped>
.tui-form__box {
	/* #ifndef APP-NVUE */
	width: 100%;
	box-sizing: border-box;
	/* #endif */
	flex: 1;
	position: relative;
}

.tui-form__errmsg {
	position: fixed;
	z-index: 900;
	text-align: center;
	left: 20rpx;
	right: 20rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	display: flex;
	word-break: break-all;
	/* #endif */
	align-items: center;
	justify-content: center;
	padding: 24rpx;
	opacity: 0;
	transform: translateZ(0) translateY(-100%);
	transition-property: transform, opacity;
	transition-duration: 0.25s;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;
}

.tui-form__text {
	text-align: center;
}

.tui-message__show {
	transform: translateY(0) translateZ(0);
	opacity: 1;
}

.tui-form__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 99;
}
</style>
